<template>
  <div>
    <!-- Navbar -->
    <van-nav-bar
      right-text="注册"
      left-arrow
      @click-left="$router.push('/my')"
      @click-right="console.log('按钮')"
    />
    <!-- 登录框 -->
    <div class="loginBox">
      <div class="top">
        <div class="topleft">
          {{ loginMode ? "密码登录" : "短信验证码登录" }}
        </div>
        <div class="topright" @click="loginMode = !loginMode">
          {{ loginMode ? "短信验证码登录" : "密码登录"
          }}<van-icon name="arrow" />
        </div>
      </div>
      <!-- fome表单 -->
      <van-form @submit="onSubmit" ref="target">
        <van-cell-group inset>
          <van-field
            v-model.trim="data.mobile"
            name="用户名"
            placeholder="请输入手机号"
            :rules="rules.mobile"
          />
          <van-field
            v-model.trim="data.password"
            :type="isPassword ? 'text' : 'password'"
            name="密码"
            placeholder="请输入密码"
            :rules="rules.password"
            v-if="loginMode"
          >
            <template #right-icon>
              <img
                v-if="isPassword"
                class="img"
                src="@/assets/upload/eye-states-on@2x.png"
                @click="isPassword = !isPassword"
              />
              <img
                v-else
                class="img"
                src="@/assets/upload/eye-states-off@2x.png"
                @click="isPassword = !isPassword"
              />
            </template>
          </van-field>
          <van-field
            v-model.trim="data.code"
            type="number"
            name="验证码"
            placeholder="短信验证码"
            :rules="rules.code"
            v-else
          >
            <template #extra>
                <span
                class="sendcode"
                :class="{ active: isSend }"
                @click="sendCode"
                >{{ isSend ? `${time}s后再次发送` : "发送验证码" }}</span
              >
            </template>
          </van-field>
          <van-field name="checkbox">
            <template #input>
              <van-checkbox v-model="checked" icon-size="20px"
                >我已同意 <span class="agreement">用户协议</span> 及
                <span class="agreement">隐私条款</span></van-checkbox
              >
            </template>
          </van-field>
        </van-cell-group>
        <div style="margin: 16px 0">
          <van-button round block type="primary" native-type="submit">
            登录
          </van-button>
        </div>
      </van-form>
      <div class="forgetPsd">忘记密码?</div>
      <!-- 第三方登录 -->
      <van-divider>第三方登录</van-divider>
      <div class="footer">
        <img class="qqimg" src="@/assets/upload/QqCircleFilled@2x.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCode } from '@/api'
import { ref } from 'vue'
import { showToast, showLoadingToast, showSuccessToast } from 'vant'
import { useStore } from 'vuex'
import { useRouter } from 'vue-router'
const store = useStore()
const router = useRouter()

// true密码登录 or false短信验证码登录
const loginMode = ref(true)

// 表单数据
const data = ref({
  mobile: '',
  password: '',
  code: ''
})
// 表单校验规则
const rules = ref({
  mobile: [
    { required: true, message: '请输入手机号' },
    { pattern: /^1[3-9]\d{9}$/, message: '手机号格式不正确' }
  ],
  password: [
    { required: true, message: '请输入密码' },
    { pattern: /^\w{8,25}$/, message: '密码需8-24个字符' }
  ],
  code: [
    { required: true, message: '请输入验证码' },
    { pattern: /^\d{6}$/, message: '验证码需6个字符' }
  ]
})

// 密码是否可见
const isPassword = ref(false)

// 发送验证码
const target = ref(null)
const isSend = ref(false)
const time = ref(60)
const sendCode = async () => {
  if (data.value.mobile === '') {
    target.value.validate('用户名')
    return
  }
  const code = await getCode({
    mobile: data.value.mobile,
    type: 'login'
  })
  console.log('code', code)
  isSend.value = true
  showSuccessToast('发送成功')
  const timerId = setInterval(() => {
    time.value--
    if (time.value < 0) {
      clearInterval(timerId)
      isSend.value = false
      time.value = 60
    }
  }, 1000)
}

//  多选框
const checked = ref(false)

// 登录
const onSubmit = async (values) => {
  // 登录前判断是否勾选协议
  if (values.checkbox === false) {
    showToast('请勾选我同意')
    return
  }
  // 加载状态
  showLoadingToast({
    message: '登录中...',
    forbidClick: true
  })
  if (loginMode.value) {
    // 密码登录
    await store.dispatch('login/onLogin', {
      mobile: data.value.mobile,
      password: data.value.password
    })
  } else {
    // 验证码登录
    await store.dispatch('login/onLogin', {
      mobile: data.value.mobile,
      code: data.value.code
    })
  }
  if (store.state.login.userInfo.token) {
    store.commit('layout/setActive', 3)
    router.push('/my')
    showSuccessToast('登录成功')
  }
}
</script>

<style lang="scss" scoped>
// Navbar
::v-deep .van-nav-bar .van-icon {
  color: #121826;
}
::v-deep .van-nav-bar__text {
  color: #16c2a3;
}

// 登录框
::v-deep .loginBox {
  padding: 50px 50px 0;
  .top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 110px;
    .topleft {
      font-size: 44px;
    }
    .topright {
      font-size: 28px;
      color: #3c3e42;
    }
  }
  .van-cell-group--inset {
    margin: unset;
    .van-cell {
      padding-left: 0;
      .img {
        width: 28px;
      }
      .sendcode {
        color: #16c2a3;
      }
      .active {
        pointer-events: none;
        color: #16c2a380;
      }
      .van-checkbox__icon--checked {
        .van-icon {
          background-color: #16c2a3;
          border-color: unset;
        }
      }
    }
    .agreement {
      color: #16c2a3;
    }
  }
  .van-button--round {
    background-color: #16c2a3;
    border: 0;
  }
  .forgetPsd {
    margin-top: 40px;
    margin-bottom: 120px;
    font-size: 30px;
  }
  .footer {
    width: 100%;
    text-align: center;
    .qqimg {
      width: 80px;
      height: 80px;
    }
  }
}
</style>
